<script>
    import glass from "$lib/assets/glass.png";


</script>


<section id="hero">

    <div class="bg-blue-l">
        <div class="container max-w-7xl mx-auto p-6">
            <div class="flex flex-col justify-center items-center  md:flex-row-reverse">
                <div class="flex justify-center md:w-2/4">
                    <img src="{glass}" alt="" class="w-[240px] h-[480px] md:w-[320px] md:h-[640px]">
                </div>
                <div class="flex flex-col justify-center md:w-2/4">
                    <h1 class="pt-2 text-blue-d text-4xl font-dosis  uppercase font-black text-center md:text-9xl md:text-start">Enjoy <span class="text-blue-m">pure water</span> <br>in your entire home</h1>
                    <h3 class="pt-2 text-blue-d text-center md:text-2xl md:text-start">We will install a water treatment system <br>within 2 hours after placing the order</h3>
                    <div></div>
                </div>
            </div>
        </div>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="fill-blue-l rotate-180 mt-[-10px]">
        <path  fill-opacity="1" d="M0,64L40,90.7C80,117,160,171,240,165.3C320,160,400,96,480,106.7C560,117,640,203,720,213.3C800,224,880,160,960,133.3C1040,107,1120,117,1200,138.7C1280,160,1360,192,1400,208L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
    </svg>
</section>



